<template>
    <div class="lyear-layout-web">
        <div class="lyear-layout-container">
            <the-aside></the-aside>

            <the-header title="进库验货订单列表"></the-header>


            <the-button :msg="msg" :fun="fun"></the-button>


            <button id="view-button" type="button" v-show="false" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#viewModal">
                查看订单详情触发按钮
            </button>

            <button id="edit-state-button" type="button" v-show="false" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#editStateModal">
                修改状态窗口触发按钮
            </button>

            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" id="viewModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content"  style="height:500px; width: 700px; overflow:scroll;">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="viewModalLabel"></h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th style="width:40%;text-align: center;">进库验货单编号</th>
                                            <th style="width:20%;text-align: center;">商品编号</th>
                                            <th style="width:20%;text-align: center;">购买数量(份)</th>
                                            <th style="width:20%;text-align: center;">库位</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <template v-for="inspectOrderDetail in inspectionDetailOrder">
                                            <tr style="text-align: center;">
                                                <td style="vertical-align:middle" v-text="inspectOrderDetail.incomingInspectionId"></td>
                                                <td style="vertical-align:middle" v-text="inspectOrderDetail.goodsId"></td>
                                                <td style="vertical-align:middle" v-text="inspectOrderDetail.goodsNumber"></td>
                                                <td style="vertical-align:middle" v-text="inspectOrderDetail.warehousePosition"></td>
                                            </tr>
                                        </template>
                                        </tbody>
                                    </table>
                                </div>


                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>





            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editStateModalLabel" id="editStateModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="editStateModalLabel"></h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-state">验货状态</label>
                                </div>
                                <div class="col-md-7">
                                    <select id="example-hf-state" v-model="editStateDto.state" style="width:320px; height: 38px;" class="form-control" size="1">
                                        <option value="1">已验货</option>
                                        <option value="2">未验货</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="close-button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" @click="saveEditState">点击保存</button>
                        </div>
                    </div>
                </div>
            </div>



            <!--页面主要内容-->
            <main class="lyear-layout-content">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-toolbar clearfix">
                                    <form class="pull-right search-bar" style="max-width:460px;" role="form">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <input type="hidden" name="search_field" id="search-field" value="title">
                                                <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                                                    订单编号 <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li> <a tabindex="-1" href="javascript:void(0)"  data-field="title">订单编号</a> </li>
                                                </ul>
                                            </div>
                                            <input id="search-name" style="width:280px"  type="text " v-model="searchContent" class="form-control" value="" placeholder="请输入要搜索的内容..">
                                            <a class="btn btn-pink" href="javascript:void(0);" @click="searchInspectionOrder"><i class="mdi mdi-search-web"></i> 搜索</a>
                                        </div>
                                    </form>
                                    <div class="toolbar-btn-action">
                                        <a class="btn btn-info m-r-5" href="javascript:void(0);" @click="refresh"><i class="mdi mdi-rotate-3d"></i> 刷新</a>
                                    </div>
                                </div>
                                <div class="card-body">

                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th style="width:20%">编号</th>
                                                <th style="width:20%">采购单编号</th>
                                                <th style="width:10%">总重量</th>
                                                <th style="width:10%">总数量</th>
                                                <th style="width:10%">验货状态</th>
                                                <th style="width:20%">生成时间</th>
                                                <th style="width:10%">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="inspectionOrder in inspectionOrderList" >
                                                <td :id="'inspectionOrder-id-'+inspectionOrder.id" v-text="inspectionOrder.id"></td>
                                                <td :id="'inspectionOrder-purchase-id-'+inspectionOrder.id" v-text="inspectionOrder.purchaseId"></td>
                                                <td :id="'inspectionOrder-total-weight-'+inspectionOrder.id" v-text="inspectionOrder.totalWeight"></td>
                                                <td :id="'inspectionOrder-total-number-'+inspectionOrder.id" v-text="inspectionOrder.totalNumber"></td>
                                                <td :id="'inspectionOrder-inspect-state-'+inspectionOrder.id" :tip="inspectionOrder.inspectState">
                                                    <template v-if="inspectionOrder.inspectState === 1">
                                                        已验货
                                                    </template>
                                                    <template v-if="inspectionOrder.inspectState === 2">
                                                        未验货
                                                    </template>
                                                </td>
                                                <td :id="'inspectionOrder-inspect-date-'+inspectionOrder.id" v-text="inspectionOrder.inspectDate"></td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a v-if="permissionCheck('edit_inspect_state')" class="btn btn-xs btn-default" @click="openEditState(inspectionOrder.id)" href="javascript:void(0);" title="修改状态" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                        <a class="btn btn-xs btn-default" @click="openView(inspectionOrder.id)" href="javascript:void(0);" title="查看详情" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                                                        <a v-if="permissionCheck('generate_incoming_order')" class="btn btn-xs btn-default" @click="generateIncomingOrder(inspectionOrder.id)" href="javascript:void(0);" title="生成入仓订单" data-toggle="tooltip"><i class="mdi mdi-briefcase-upload"></i></a>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- 分页 -->
                                    <the-pagination :page="page" :getData="getData" :searchContent="searchContent" :searchType="searchType" :totalPage="totalPage"></the-pagination>


                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </main>
            <!--End 页面主要内容-->
        </div>
    </div>
</template>



<script>
    import TheHeader from "../components/the-header";
    import TheAside from "../components/the-aside";
    import TheButton from "../components/the-button";
    import ThePagination from "../components/the-pagination";
    export default {
        name: 'inspection-order-list',
        components: {TheHeader, TheAside, TheButton, ThePagination},
        data: function() {
            return {
                editStateDto:{},
                inspectionDetailOrder:[],
                inspectionOrder: {},
                inspectionOrderList: [],
                msg: "",
                fun:"",
                page: 1,
                totalPage: 1,
                searchContent: '',
                searchType: 'id'
            }
        },
        //mounted 页面渲染完后执行 钩子函数
        mounted:function(){
            $('.search-bar .dropdown-menu a').click(function() {
                let field = $(this).data('field') || '';
                $('#search-field').val(field);
                $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
            });
            //获取种类列表的数据
            let _this = this;
            let data = {
                page: _this.page,
                searchContent: _this.searchContent,
                searchType: _this.searchType
            };
            _this.getData(data);
        },
        created:function() {

        },
        methods:{
            getData(data){
                Loading.show();
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/incoming_inspection_order/get_data", data).then((response)=>{
                    let resp = response.data;
                    Loading.hide();
                    if(resp.code === 0){
                        _this.inspectionOrderList = resp.data.list;
                        _this.page = resp.data.page;
                        _this.totalPage = resp.data.totalPage;
                    }else{
                        _this.msg = resp.msg;
                        $("#alert-button").click();
                    }
                });
            },
            refresh(){
                window.location.reload();
            },
            generateIncomingOrder(id){
                let _this = this;
                let purchaseId = $("#inspectionOrder-purchase-id-"+id).text();
                let data = {purchaseId:purchaseId};
                console.log(data);
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/incoming_order/add", data).then((response)=>{
                    let resp = response.data;
                    if(resp.code === 0){
                        _this.msg = "生成成功！";
                        $("#alert-button").click();
                    }else{
                        _this.msg = resp.msg;
                        $("#alert-button").click();
                    }
                });
            },
            searchInspectionOrder(){
                let _this = this;
                //获取种类列表的数据
                let data = {
                    page: _this.page,
                    searchContent: _this.searchContent,
                    searchType: _this.searchType
                };
                _this.getData(data);
            },
            openView(id){
                let _this = this;
                for(let i=0; i<_this.inspectionOrderList.length; i++){
                    if(id === _this.inspectionOrderList[i].id){
                        _this.inspectionDetailOrder = _this.inspectionOrderList[i].incomingInspectionDetailsOrderDtos;
                    }
                }
                $("#viewModalLabel").text("查看进库验货订单详情");
                $("#view-button").click();
            },
            openEditState(id){
                let _this = this;
                _this.editStateDto.id = id;
                _this.editStateDto.state = $("#inspectionOrder-inspect-state-"+id).attr("tip");
                $("#example-hf-state").val(_this.editStateDto.state);
                $("#editStateModalLabel").text("修改入库验货订单状态");
                $("#edit-state-button").click();
            },
            saveEditState(){
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/incoming_inspection_order/edit_state", _this.editStateDto).then((response)=>{
                    let resp = response.data;
                    if(resp.code === 0){
                        $("#close-button").click();
                        _this.msg = "修改验货状态成功！";
                        $("#alert-button").click();
                        _this.inspectionOrderList = resp.data.list;
                        _this.page = resp.data.page;
                        _this.totalPage = resp.data.totalPage;
                    }else{
                        _this.msg = resp.msg;
                        $("#alert-button").click();
                    }
                });
            },
            permissionCheck(url){
                let permissionList = Permission.getPermission();
                for(let i=0; i<permissionList.length; i++){
                    if(url === permissionList[i]){
                        return true;
                    }
                }
                return false;
            }
        }
    }

</script>


<style>
</style>


